<!-- 页面水平布局组件 - 提供水平导航栏的页面布局结构 -->
<template>
  <div class="background">
    <div class="head">
      <div class="headtxt">
        <!-- 标题，使用插槽允许父组件自定义 -->
        <slot name="TITLE"><h1>未添加标题</h1></slot>
      </div>
      <div class="user-info">
        <!-- 功能列表 - 使用通用DropdownMenu组件 -->
        <div class="list">
          <DropdownMenu 
            title="功能列表"
            :items="featureList"
            position="bottom-left"
            :width="120"
            @item-click="handleFeatureClick"
          />
        </div>

        <!-- 用户信息区域 -->
      
        <span>欢迎，{{ userInfo?.username }}</span>
        <button @click="handleLogout" class="btn">退出登录</button>
      </div>
    </div>
    
    <main class="Main">
      <!-- 主内容区域，使用插槽使组件更灵活 -->
      <slot name="MAIN"></slot>
    </main>
  </div>
</template>












<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { logout } from '../api/auth'
import type { UserInfo } from '../api/auth'
import DropdownMenu from './common/DropdownMenu.vue'
import type { DropdownItem } from './common/DropdownMenu.vue'

// 页面布局组件，提供基本的页面结构
// 包含上导航栏（标题、功能列表、用户信息）和主内容区域

const router = useRouter()
const userInfo = ref<UserInfo | null>(null)

// 功能列表数据 - 使用DropdownItem类型
const featureList = ref<DropdownItem[]>([
  { id: 'f0', name: '账号管理' },
  { id: 'f1', name: '1' },
  { id: 'f2', name: '2' },
  { id: 'f3', name: '3' },
  { id: 'f4', name: '4' }
])

// 功能项点击事件处理 - 适配DropdownMenu组件的事件接口
const handleFeatureClick = (item: DropdownItem, _index: number) => {
  console.log('点击了功能:', item.id, item.name)
  // 这里可以根据不同的 featureId 执行不同的逻辑
  switch (item.id) {
    case 'f0':
      // 点击 "账号管理" 跳转到 User 页面
      console.log('跳转到 UserUser 页面')
      router.push('/User')
      break
    case 'account':
      // 账号管理逻辑
      console.log('跳转到账号管理页面')
      // router.push('/account')
      break
    case 'feature1':
      // 功能1逻辑
      console.log('执行功能1')
      break
    case 'feature2':
      // 功能2逻辑
      console.log('执行功能2')
      break
    case 'feature3':
      // 功能3逻辑
      console.log('执行功能3')
      break
    case 'feature4':
      // 功能4逻辑
      console.log('执行功能4')
      break
    default:
      console.log('未知功能')
  }
}

onMounted(() => {
  const userStr = localStorage.getItem('user')
  if (userStr) {
    userInfo.value = JSON.parse(userStr)
  }
})

const handleLogout = async () => {
  try {
    await logout()
    // 清理用户信息
    localStorage.removeItem('user')
    // 清理公司选择相关的本地存储数据
    localStorage.removeItem('selectedCompany')
    localStorage.removeItem('companyList')
    // 跳转到登录页
    router.push('/')
  } catch (error) {
    // 即使失败也清空本地存储
    localStorage.removeItem('user')
    localStorage.removeItem('selectedCompany')
    localStorage.removeItem('companyList')
    router.push('/')
  }
}
</script>

<style scoped>
/* 从Home.vue中提取的背景样式 */
.background {
  height: 100%;
  width: 100%;
  background: white;
}

/* 从Home.vue中提取的头部导航栏样式 */
.head {
  /* 固定高度，不随窗口缩放变化 */
  height: 56px;
  width: 100%;
  background: white;
  
  /* 添加底部蓝色边框作为分割线 */
  border-bottom: 2px solid blue;

  position: fixed;
  z-index: 20;
  
  /* 添加flex布局以容纳导航元素 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;
}

/* 标题样式 */
.head h1 {
  color: #333;
  margin: 0;
  font-size: 24px;
}

/* ===== 功能列表容器样式 ===== */
.list {
  /* 相对定位，作为下拉菜单的参照容器 */
  position: relative;
  /* 设置合适的宽度 */
  width: 120px;
  height: 100%;
  /* 确保组件在容器中垂直居中 */
  display: flex;
  align-items: center;
}



/* ===== 用户信息区域样式 ===== */
.user-info {
  /* 弹性布局 - 保留大小结构 */
  display: flex;
  /* 垂直居中对齐 - 保留大小结构 */
  align-items: center;
  /* 设置间距 - 保留大小结构 */
  gap: 15px;
  /* 内边距 - 保留大小结构 */
  padding: 8px 12px;
}

/* 欢迎文字样式 */
.user-info span {
  /* 保留默认浏览器样式，使用注释说明 */
  font-size: 14px;
  color: #333;
}

/* 退出登录按钮 */
.btn {
  /* 内边距 */
  padding: 6px 12px;
  /* 背景色渐变 */
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  /* 文字颜色 */
  color: white;
  /* 无边框 */
  border: none;
  /* 圆角边框 */
  border-radius: 15px;
  /* 鼠标悬停指针 */
  cursor: pointer;
  /* 字体大小 */
  font-size: 12px;
  /* 字体粗细 */
  font-weight: 500;
  /* 过渡动画 */
  transition: all 0.3s ease;
  /* 阴影效果 */
  box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
}

/* 退出按钮悬停效果 */
.btn:hover {
  /* 悬停时阴影加深 */
  box-shadow: 0 4px 10px rgba(255, 107, 107, 0.4);
  /* 轻微上移效果 */
  transform: translateY(-1px);
}

/* 退出按钮点击效果 */
.btn:active {
  /* 点击时缩小效果 */
  transform: scale(0.95);
}

/* 从Home.vue中提取的主内容区域样式 */
.Main {
  /* 绝对定位，相对于.background容器 */
  position: absolute;
  /* 顶部距离为头部高度56px，避免被固定头部遮挡 */
  top: 56px;
  /* 左侧贴边 */
  left: 0;
  /* 右侧贴边 */
  right: 0;
  /* 底部贴边，确保占满剩余高度 */
  bottom: 0;
  /* 背景色设置为浅灰色，与子页面保持一致 */
  background: #f5f7fa;

  /* 隐藏超出内容，子页面内部自行处理滚动 */
  /*overflow: hidden; */
  /* 添加垂直滚动条，当内容超出容器高度时显示，这里是错误添加 */
  overflow-y: auto;
}
</style>